﻿@{
    ViewData["Title"] = "预约记录";
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>@ViewData["Title"]</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//unpkg.com/layui@2.11.0/dist/css/layui.css" rel="stylesheet">
    <style>
        .navbar {
            display: none;
        }
        .container {
            padding: 20px;
            max-width: 100%;
            margin: 0 auto;
        }
        .search-form {
            background: #fff;
            padding: 20px;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 15px;
        }
        .layui-form-item {
            margin-bottom: 15px;
        }
        .layui-btn-container {
            margin-top: 10px;
            text-align: right;
        }
        .layui-table-tool {
            padding: 10px 15px;
        }
        .layui-laypage {
            margin-top: 20px;
        }
        .toolbar-btn {
            margin-bottom: 15px;
        }
        .toolbar-btn .layui-btn {
            margin-right: 10px;
        }
        .layui-input-inline {
            width: 280px !important;
        }
        .layui-form-label {
            width: 100px;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 工具栏按钮 -->
        <div class="toolbar-btn">
            <button type="button" class="layui-btn" id="import-btn">
                <i class="layui-icon">&#xe67c;</i>导入
            </button>
            <button type="button" class="layui-btn" id="export-btn">
                <i class="layui-icon">&#xe67d;</i>导出
            </button>
            <button type="button" class="layui-btn" id="print-btn">
                <i class="layui-icon">&#xe681;</i>打印
            </button>
            <input type="file" id="import-file" style="display: none;" accept=".xlsx,.xls">
        </div>

        <!-- 查询表单 -->
        <div class="search-form">
            <form class="layui-form" lay-filter="searchForm">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">就诊状态</label>
                        <div class="layui-input-block">
                            <input type="radio" name="status" value="" title="全部" checked>
                            <input type="radio" name="status" value="待就诊" title="待就诊">
                            <input type="radio" name="status" value="已就诊" title="已就诊">
                            <input type="radio" name="status" value="已取消" title="已取消">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">就诊日期</label>
                        <div class="layui-input-inline">
                            <input type="text" name="dateRange" class="layui-input" id="dateRange" placeholder="请选择日期范围">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">患者姓名</label>
                        <div class="layui-input-inline">
                            <input type="text" name="patientName" placeholder="请输入患者姓名" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block" style="text-align: right;">
                        <button class="layui-btn" lay-submit lay-filter="searchBtn">
                            <i class="layui-icon">&#xe615;</i>搜索
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary">
                            <i class="layui-icon">&#xe669;</i>重置
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <!-- 数据表格 -->
        <table class="layui-hide" id="registrationTable" lay-filter="registrationTable"></table>
    </div>

    <!-- 操作列模板 -->
    <script type="text/html" id="operationTpl">
        <a class="layui-btn layui-btn-xs" lay-event="detail">详情</a>
    </script>

    <script src="//unpkg.com/layui@2.11.0/dist/layui.js"></script>
    <script>
        layui.use(['table', 'layer', 'form', 'laydate'], function () {
            var table = layui.table,
                layer = layui.layer,
                form = layui.form,
                laydate = layui.laydate,
                $ = layui.jquery;

            // 初始化日期范围选择器
            laydate.render({
                elem: '#dateRange',
                range: true,
                type: 'date',
                format: 'yyyy-MM-dd'
            });

            // 表格渲染
            var tableIns = table.render({
                elem: '#registrationTable',
                url: '@ViewBag.BaseUrl/T5/Registration/GetRegistration',
                page: true,
                request: {
                    pageName: 'pageIndex',
                    limitName: 'pageSize'
                },
                limit: 10,
                limits: [10, 20, 30, 50],
                cellMinWidth: 80,
                cols: [[
                    { type: 'checkbox', fixed: 'left' },
                    { field: 'registrationId', title: 'ID', width: 80, sort: true },
                    { field: 'patientName', title: '患者姓名', width: 100 },
                    { field: 'patientNo', title: '就诊卡号', width: 120 },
                    { field: 'documentNo', title: '身份证号', width: 180 },
                    { field: 'phone', title: '手机号码', width: 130 },
                    { field: 'deparName', title: '挂号科室', width: 120 },
                    { field: 'registrationType', title: '挂号类型', width: 100 },
                    { field: 'registrationfee', title: '挂号费', width: 80 },
                    { field: 'statue', title: '挂号状态', width: 100 },
                    { field: 'mtime', title: '就诊日期', width: 180 },
                    { field: 'waitTime', title: '候诊时间', width: 100 },
                    { field: 'registrationTime', title: '预约时间', width: 180 },
                    { fixed: 'right', title: '操作', width: 80, align: 'center', toolbar: '#operationTpl' }
                ]]
            });

            // 搜索按钮点击事件
            form.on('submit(searchBtn)', function (data) {
                var formData = data.field;
                var dateRange = formData.dateRange ? formData.dateRange.split(' - ') : ['', ''];
                
                tableIns.reload({
                    where: {
                        statue: formData.status,
                        startTime: dateRange[0],
                        endTime: dateRange[1],
                        patientName: formData.patientName
                    },
                    page: {
                        curr: 1
                    }
                });
                return false;
            });

            // 表格工具条事件
            table.on('tool(registrationTable)', function (obj) {
                var data = obj.data;
                if (obj.event === 'detail') {
                    window.location.href = '/Registration/IndexRegistration?registrationId=' + data.registrationId;
                }
            });

            // 导入功能
            $('#import-btn').click(function () {
                $('#import-file').click();
            });

            $('#import-file').change(function () {
                var file = this.files[0];
                if (!file) return;

                var formData = new FormData();
                formData.append('file', file);

                var loadIndex = layer.load(2);
                $.ajax({
                    url: '@ViewBag.BaseUrl/T6/Registration/ImportInventories',
                    type: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function (res) {
                        layer.close(loadIndex);
                        layer.msg('导入成功', { icon: 1 });
                        tableIns.reload();
                    },
                    error: function () {
                        layer.close(loadIndex);
                        layer.msg('导入失败，请稍后重试', { icon: 2 });
                    }
                });
            });

            // 导出功能
            $('#export-btn').click(function () {
                var checkStatus = table.checkStatus('registrationTable');
                var data = checkStatus.data;
                
                if (data.length === 0) {
                    layer.msg('请选择要导出的记录', { icon: 2 });
                    return;
                }

                // 准备导出数据
                var exportData = data.map(function(item) {
                    return {
                        'ID': item.registrationId,
                        '患者姓名': item.patientName,
                        '就诊卡号': item.patientNo,
                        '身份证号': item.documentNo,
                        '手机号码': item.phone,
                        '挂号科室': item.deparName,
                        '挂号类型': item.registrationType,
                        '挂号费': item.registrationfee,
                        '挂号状态': item.statue,
                        '就诊日期': item.mtime,
                        '候诊时间': item.waitTime,
                        '预约时间': item.registrationTime
                    };
                });

                // 使用Layui的导出功能
                table.exportFile('registrationTable', exportData, 'xls');
            });

            // 打印功能
            $('#print-btn').click(function () {
                var checkStatus = table.checkStatus('registrationTable');
                var data = checkStatus.data;
                
                if (data.length === 0) {
                    layer.msg('请选择要打印的记录', { icon: 2 });
                    return;
                }

                // 创建打印内容
                var printContent = `
                    <div style="text-align: center; margin-bottom: 20px;">
                        <h2>预约记录</h2>
                        <p>打印时间：${new Date().toLocaleString()}</p>
                    </div>
                    <table border="1" cellspacing="0" cellpadding="5" style="width: 100%; border-collapse: collapse;">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>患者姓名</th>
                                <th>就诊卡号</th>
                                <th>身份证号</th>
                                <th>手机号码</th>
                                <th>挂号科室</th>
                                <th>挂号类型</th>
                                <th>挂号费</th>
                                <th>挂号状态</th>
                                <th>就诊日期</th>
                                <th>候诊时间</th>
                                <th>预约时间</th>
                            </tr>
                        </thead>
                        <tbody>
                            ${data.map(function(item) {
                                return `
                                    <tr>
                                        <td>${item.registrationId}</td>
                                        <td>${item.patientName}</td>
                                        <td>${item.patientNo}</td>
                                        <td>${item.documentNo}</td>
                                        <td>${item.phone}</td>
                                        <td>${item.deparName}</td>
                                        <td>${item.registrationType}</td>
                                        <td>${item.registrationfee}</td>
                                        <td>${item.statue}</td>
                                        <td>${item.mtime}</td>
                                        <td>${item.waitTime}</td>
                                        <td>${item.registrationTime}</td>
                                    </tr>
                                `;
                            }).join('')}
                        </tbody>
                    </table>
                `;

                // 创建打印窗口
                var printWindow = window.open('', '_blank');
                printWindow.document.write(`
                    <!DOCTYPE html>
                    <html>
                    <head>
                        <meta charset="utf-8">
                        <title>预约记录打印</title>
                        <style>
                            body { font-family: Arial, sans-serif; }
                            table { width: 100%; border-collapse: collapse; }
                            th, td { border: 1px solid #000; padding: 5px; text-align: left; }
                            th { background-color: #f0f0f0; }
                        </style>
                    </head>
                    <body>
                        ${printContent}
                        <div style="text-align: center; margin-top: 20px;">
                            <button onclick="window.print()">打印</button>
                            <button onclick="window.close()">关闭</button>
                        </div>
                    </body>
                    </html>
                `);
                printWindow.document.close();
            });
        });
    </script>
</body>
</html>